<template>
  <div class="detail">
    <!--    <el-row :gutter="20">-->
    <!--      <el-col :span="18">-->
    <div class="article">
      <div class="img">
        <img class="cover" :src="blogInfo.picture | filterImg" alt="">
      </div>
      <div class="title">
        <h1 v-text="blogInfo.title">什么是CSS选择器</h1>
      </div>
      <div class="description">
        <div class="articleInfo">
          <div class="username" v-text="blogInfo.username">穷酸蛤蟆</div>
          <div class="publishTIme">于 {{ blogInfo.updateTime | datetimeFilter }} 发布</div>
          <div class="views" v-text="blogInfo.views">666</div>
        </div>
        <div class="partition">
          分类专栏:
        </div>
      </div>
      <div class="content">
        <v-md-preview :text="content"></v-md-preview>
      </div>
    </div>
    <div class="comment-box">
      <div class="tit">
        评论区
      </div>
      <div class="content">
        <comment-item v-for="item in comments" :key="item.id" :comment="item" ref="rootComment"
                      :reply-dialog-visible="true"
                      @closeReplyInput="closeReply"
                      @openReplyDialog="openReplyDialog"></comment-item>
        <el-empty v-if="comments.length === 0" description="评论区空空如也…"></el-empty>
      </div>
    </div>
    <el-dialog
        custom-class="reply-dialog"
        top="8vh"
        title="查看评论"
        :visible.sync="replyDialogVisible"
    >
      <div class="replyList">
        <div class="commentTop">
          <comment-item ref="replyTop" :reply-dialog-visible="false" @closeReplyInput="closeInnerReply"
                        :comment="rootReply"></comment-item>
        </div>
        <div class="reply-body">
          <comment-item ref="replyList" :reply-dialog-visible="false" @closeReplyInput="closeDialogReplyInput"
                        v-for="item in replys" :comment="item"
                        :key="item.id"></comment-item>
        </div>

      </div>
    </el-dialog>
    <div class="comment-input">
      <div class="tit">看帖是喜欢,评论才是真爱:</div>
      <el-input
          type="textarea"
          class="content"
          :rows="4"
          placeholder="请开始你的表演..."
          maxlength="1000"
          :autosize="{minRows:4}"
          show-word-limit
          resize="none"
          v-model="commentContent">
      </el-input>
      <div class="commit">
        <el-button class="" type="primary" style="float: right" @click="sendComment">评论</el-button>
      </div>
      <!--          <div style="clear: both"></div>-->
    </div>

    <!--      </el-col>-->
    <!--      <el-col :span="6">-->
    <!--        <div class="grid-content bg-purple">111</div>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
  </div>
</template>

<script>
import {blogDetail} from "../../api/blog";
import CommentItem from "../../components/CommentItem";
import {blogCommentReplys} from "../../api/blog-comment";
import {commentList, sendComment} from "../../api/drama-comment";

export default {
  name: "detail",
  components: {CommentItem},
  created() {
    this.getBlogInfo()
  },
  data() {
    return {
      blogInfo: Object,
      content: '',
      comments: [],
      replys: [],
      commentContent: '',
      rootReply: Object,
      replyDialogVisible: false,
    }
  },
  methods: {
    getBlogInfo() {
      let id = this.$route.params.id;
      blogDetail(id).then(res => {
        this.blogInfo = res.data.data
        this.content = this.blogInfo.content
        this.comments = this.blogInfo.comments
        console.log(this.blogInfo)
      })
    },

    closeReply() {
      let replys = this.$refs.rootComment;
      replys.forEach((item, i) => {
        item.$data.replyInputVisible = false
      })
      this.$nextTick()
    },
    closeInnerReply() {
      let replyList = this.$refs.replyList;
      replyList.forEach((item, i) => {
        item.$data.replyInputVisible = false;
        console.log(item.$data.replyInputVisible)
      })
      this.$nextTick()

    },
    closeDialogReplyInput() {
      let replyList = this.$refs.replyList;
      let replyTop = this.$refs.replyTop;
      replyTop.$data.replyInputVisible = false;
      replyList.forEach((item, i) => {
        item.$data.replyInputVisible = false;
        console.log(item.$data.replyInputVisible)
      })
      this.$nextTick()
    },
    openReplyDialog(rootComment) {
      this.replyDialogVisible = true
      this.rootReply = rootComment
      blogCommentReplys(this.rootReply.id).then(res => {
        this.replys = res.data.data;
      }).catch(err => console.log(err))
    },
    sendComment() {

    }
  }
}
</script>

<style scoped>

.article {
  background-color: #ffffff;
  padding: 15px;
}

.article .cover {
  width: 100%;
  object-fit: cover
}

.article .title h1 {
  text-align: center;
}

.article .description {
  padding: 10px 25px;
  background-color: #f8f8f8;
}

.description .articleInfo, .description .partition {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  color: #999aaa;
  font-size: 14px;
}

.comment-input {
  margin-top: 10px;
  padding: 25px 15px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)

}

.comment-box {
  background-color: #FFFFFF;
  margin: 10px 0;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.comment-box .tit {
  font-size: 15px;
  font-weight: bold;
  padding: 8px 16px;
  border-bottom: 1px dotted #DEDEDE;
}


.comment-input {
  margin-top: 10px;
  padding: 25px 15px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)

}

.comment-input .tit {
  color: #ccc;
  margin-bottom: 15px;
  cursor: default;
}

.comment-input .content {
  font-size: 15px;
  color: #666;
}

.comment-input .commit {
  margin-top: 15px;
}

.comment-input .commit::after {
  content: '';
  display: block;
  clear: both;
}

</style>
